<template>
  <div class="app-container">
    <!-- <i class="el-icon-question  xsydBtn" @click.stop="driverStart">操作引导</i> -->
    <el-form
      v-show="showSearch"
      id="queryForm"
      ref="queryForm"
      :model="queryParams"
      :inline="true"
      label-width="95px"
    >
      <el-form-item label="节点名称" prop="searchKey">
        <el-input
          v-model="queryParams.searchKey"
          maxlength="50"
          placeholder="请输入节点名称或节点IP"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="节点类型" prop="nodeType">
        <el-select
          v-model="queryParams.nodeType"
          placeholder="请选择节点类型"
          clearable
          size="small"
          style="width: 240px"
        >
          <el-option
            v-for="dict in nodeTypeOptions"
            :key="dict.value"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="节点状态" prop="nodeType">
        <el-select
          v-model="queryParams.nodeStatus"
          placeholder="请选择节点状态"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in nodeStatusOptions"
            :key="dict.value"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
        >搜索</el-button>
        <el-button
          icon="el-icon-refresh"
          size="mini"
          @click="resetQuery"
        >重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col id="addBox" :span="1.5">
        <el-button
          v-hasPermi="['console:belfNode:add']"
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['console:belfNode:remove']"
          size="mini"
          type="danger"
          icon="el-icon-delete"
          :disabled="multiple"
          @click="handleDelete"
        >删除</el-button>
      </el-col>
      <!-- 	<el-col :span="1.5">
				<el-button type="primary" icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['console:belfNode:export']"
				 plain>导出</el-button>
			</el-col> -->
      <right-toolbar
        :show-search.sync="showSearch"
        @queryTable="getList"
      />
    </el-row>

    <el-table
      id="tableBox"
      ref="tableBox"
      :border="$store.state.settings.isShowTabBorder"
      :data="belfNodeList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="节点名称" align="left" prop="nodeName" />
      <el-table-column
        label="节点类型"
        width="100"
        align="center"
        prop="nodeType"
        :formatter="nodeTypeFormat"
      />
      <el-table-column
        label="节点IP地址"
        width="128"
        align="center"
        prop="nodeIp"
      />
      <el-table-column
        label="管理端口"
        width="80"
        align="center"
        prop="haPort"
      />
      <el-table-column
        label="节点状态"
        width="100"
        align="center"
        prop="nodeStatus"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.nodeStatus == 1" style="color: #67c23a">
            <i class="el-icon-loading" />
            在线</span>
          <span v-else style="color: #f56c6c">
            <i class="el-icon-error" />
            离线</span>
        </template>
      </el-table-column>
      <!--      <el-table-column label="代理状态" align="center" prop="agentStatus"  :formatter="agentStatusFormat" />
      <el-table-column label="业务应用状态" align="center" prop="serviceStatus"  :formatter="serviceStatusFormat" /> -->

      <el-table-column
        label="操作系统"
        align="center"
        prop="nodeSystem"
        :formatter="nodeSystemFormat"
      />
      <el-table-column
        label="控制台地址"
        width="128"
        align="center"
        prop="consoleAddress"
      />
      <el-table-column
        label="宿主类型"
        align="center"
        prop="vmType"
        :formatter="hostTypeFormat"
      />

      <el-table-column
        label="节点描述"
        align="center"
        prop="nodeDesc"
        width="200"
      >
        <template slot-scope="scope">
          <el-tooltip
            v-if="scope.row.nodeDesc && scope.row.nodeDesc.length > 14"
            placement="top"
          >
            <div slot="content">{{ scope.row.nodeDesc }}</div>
            <div class="nowrap">{{ scope.row.nodeDesc }}</div>
          </el-tooltip>
          <div v-else class="nowrap">{{ scope.row.nodeDesc || "--" }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="right"
        class-name="small-padding fixed-width"
        width="250"
      >
        <template slot-scope="scope">
          <el-button
            v-show="scope.row.nodeType != 3"
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="showHandle(scope.row)"
          >节点监控</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-link"
            @click="handleUpdateFn(scope.row, 'resh')"
          >连通测试</el-button>
          <el-button
            v-hasPermi="['console:belfNode:edit']"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >修改</el-button>
          <el-button
            v-hasPermi="['console:belfNode:remove']"
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pgNum"
      :limit.sync="queryParams.pgSize"
      @pagination="getList"
    />

    <!-- 添加或修改节点信息对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="800px"
      append-to-body
      :close-on-click-modal="false"
    >
      <!-- 帮助引导 -->
      <guidance class="dialogBtn" title="" :list="helpList2" />

      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="110px"
        style="margin-top: -20px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="节点名称" prop="nodeName">
              <el-input
                v-model="form.nodeName"
                maxlength="50"
                size="small"
                show-word-limit
                placeholder="请输入节点名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="节点IP地址" prop="nodeIp">
              <el-input
                v-model="form.nodeIp"
                size="small"
                :disabled="
                  title == '添加节点信息' || form.upFlag ? false : true
                "
                placeholder="请输入节点ip地址"
                @input="handlerPageNo($event)"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="节点类型" prop="nodeType">
              <el-select
                v-model="form.nodeType"
                placeholder="请选择节点类型"
                :disabled="
                  title == '添加节点信息' || form.upFlag ? false : true
                "
                clearable
                size="small"
                style="width: 270px"
                @change="changeNodeTypeFn"
              >
                <el-option
                  v-for="dict in nodeTypeOptions"
                  :key="dict.value"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="管理端口" prop="haPort">
              <el-input
                v-model="form.haPort"
                size="small"
                show-word-limit
                placeholder="端口"
              />
            </el-form-item>
          </el-col>

          <!-- <el-col :span="3">
						<span class='hsPortSpan' @click='testHttpCode' v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="拼命加载中"
						 element-loading-spinner="el-icon-loading" customClass='elLodingBox' element-loading-background="rgba(0, 0, 0, 0.8)">连通测试</span>
					</el-col> -->

          <el-col :span="12">
            <el-form-item label="宿主类型" prop="vmType">
              <el-select
                v-model="form.vmType"
                placeholder="请选择宿主类型"
                clearable
                size="small"
                style="width: 270px"
              >
                <el-option
                  v-for="dict in hostTypeOptions"
                  :key="dict.value"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="实例ID" prop="vmId">
              <el-input
                v-model="form.vmId"
                :disabled="form.vmType != 'Bingo'"
                size="small"
                placeholder="输入品高实例ID"
                maxlength="10"
              />
            </el-form-item>
          </el-col>

          <!-- <el-col :span="12">
						<el-form-item label="节点状态">
							<el-select v-model="form.nodeStatus" disabled placeholder="请选择节点状态" clearable size="small">
								<el-option v-for="dict in nodeStatusOptions" :key="dict.value" :label="dict.dictLabel" :value="dict.dictValue" />
							</el-select>
						</el-form-item>
					</el-col> -->

          <el-col :span="12">
            <el-form-item label="网关" prop="nodeGateway">
              <el-input
                v-model="form.nodeGateway"
                maxlength="15"
                size="small"
                placeholder="请输入网关"
              />
            </el-form-item>
          </el-col>
          <!-- 			<el-col :span="12">
						<el-form-item label="宿主类型" prop="nodeType">
							<el-select v-model="form.nodeType" placeholder="请选择宿主类型" :disabled="form.isShowSl" clearable size="small" style="width:270px">
							 <el-option v-for="dict in nodeTypeOptions" :key="dict.value" :label="dict.dictLabel" :value="dict.dictValue" />
								<el-option  label="实体机"  />
								<el-option  label="品⾼"  />
								<el-option  label="ESXi"  />
								<el-option  label="SmartX"  />
							</el-select>
						</el-form-item>
					</el-col>
					 -->
          <el-col :span="12">
            <el-form-item label="心跳间隔" prop="checkInterval">
              <el-select
                v-model="form.checkInterval"
                placeholder="请选择心跳间隔"
                clearable
                size="small"
                style="width: 270px"
              >
                <el-option
                  v-for="dict in checkIntervalOptions"
                  :key="dict.value"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="操作系统" prop="nodeSystem">
              <el-select
                v-model="form.nodeSystem"
                style="width: 270px"
                :disabled="
                  title == '添加节点信息' || form.upFlag ? false : true
                "
                placeholder="请选择操作系统"
                clearable
                size="small"
                @change="nodeSysChange"
              >
                <el-option
                  v-for="dict in nodeSystem"
                  :key="dict.value"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="控制台地址" prop="consoleAddress">
              <el-input
                v-model="form.consoleAddress"
                size="small"
                placeholder="请输入与节点IP同网段的控制台地址"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <!-- 	<el-col :span="12">
						<el-form-item label="数据存留" prop="dataDate">
							<el-input-number v-model="form.dataDate" :min="1" :max="1000" label="请输入数据存留时间"></el-input-number> 天
						</el-form-item>
					</el-col> -->
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="RPC线程数" prop="rpcThreadNum">
              <el-input-number
                v-model="form.rpcThreadNum"
                controls-position="right"
                :min="1"
                :max="6"
                size="small"
                show-word-limit
                placeholder="请输入节点名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="RPC超时数" prop="rpcTime">
              <el-input-number
                v-model="form.rpcTime"
                controls-position="right"
                :min="1000"
                :max="70000"
                size="small"
                show-word-limit
                placeholder="请输入节点名称"
              />
              （毫秒）
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="节点描述" prop="nodeDesc">
              <el-input
                v-model="form.nodeDesc"
                type="textarea"
                :rows="3"
                maxlength="100"
                show-word-limit
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
        style="padding-bottom: 20px; margin-top: 20px"
      >
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 删除弹框 -->
    <el-dialog
      title="提示"
      :visible.sync="delNodeDialogVisible"
      width="640px"
      append-to-body
      :close-on-click-modal="false"
    >
      <div class="ft16">
        <i class="el-icon-warning warning" />
        删除节点的同时会同步删除相关联的
        “复刻组”,“保障组”和“CDP组”等数据,请再次确认要删除的节点信息后，点击确认删除。
        <p>一旦删除无法恢复，请谨慎操作！</p>
      </div>

      <p class="ft16">您将要删除节点:</p>
      <div class="h170">
        <div v-for="dict in delNodeList" :key="dict.id" class="tagDiv">
          <p>{{ dict.nodeName }}</p>
          <p class="nodeIp">{{ dict.nodeIp }}</p>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delNodeDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleDeleteFn">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 系统监听 -->
    <systemMonitoring
      ref="sysDialog"
      :sys-dialog-visible="sysDialogVisible"
    />
  </div>
</template>

<script>
import {
  listBelfNode,
  getBelfNode,
  delBelfNode,
  addBelfNode,
  updateBelfNode,
  exportBelfNode,
  httpCode,
  editNodeStatus,
  ipCheck,
  nodeCheck
} from '@/api/console/belfNode'

import systemMonitoring from '@/views/components/flowChart/systemMonitoring'

import global_ from '@/utils/Global'

import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(['novice_guidance_status'])
  },
  name: 'BelfNode',
  components: {
    systemMonitoring
  },
  data() {
    var ipCheckExist = (rule, value, callback) => {
      ipCheck({
        nodeIp: value
      }).then((response) => {
        if (response.data) {
          if (this.title != '修改节点信息') {
            callback(new Error('已经存在该IP地址的节点'))
          } else {
            callback()
          }
        } else {
          callback()
        }
      })
    }

    var CheckVmId = (rule, value, callback) => {
      if (this.form.vmType) {
        if (this.form.vmType == 'Bingo') {
          if (value == '' || value == null) {
            callback(new Error('请填写品高实例ID'))
          } else if (value.length != 10) {
            callback(new Error('请检查品高ID是否完整'))
          } else {
            callback()
          }
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    return {
      helpList2: [
        {
          title: '节点配置注意事项',
          helpMsg: '节点配置注意事项'
        }
      ],
      helpList: [
        {
          title: '1.节点信息页面指引',
          helpMsg: '节点信息页面指引'
        },
        {
          title: '2.节点配置注意事项',
          helpMsg: '节点配置注意事项'
        }
      ],
      // 操作系统
      nodeSystem: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 节点信息表格数据
      belfNodeList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pgNum: 1,
        pgSize: 10,
        searchKey: null,
        nodeType: null,
        nodeStatus: ''
      },
      fullscreenLoading: false,
      delNodeDialogVisible: false,
      // 表单参数
      form: {
        haPort: 49101,
        checkInterval: '5',
        consoleAddress: '',
        vmId: '',
        rpcThreadNum: 1,
        rpcTime: 5000
      },
      nodeIPandnodeGateway: '',

      // 表单校验
      rules: {
        nodeName: [
          {
            required: true,
            message: '请输入节点名称',
            trigger: 'blur'
          }
        ],
        nodeGateway: [
          {
            required: true,
            message: '请输入网关地址',
            trigger: 'blur'
          },
          {
            pattern: global_.IpRegex,
            message: '请输入合法_有效的网关地址',
            trigger: 'blur'
          }
        ],
        nodeType: [
          {
            required: true,
            message: '请选择节点类型',
            trigger: 'blur'
          }
        ],
        nodeIp: [
          {
            required: true,
            message: '请输入节点ip地址',
            trigger: 'blur'
          },
          {
            pattern: global_.IpRegex,
            message: global_.IpRegex_msg,
            trigger: 'blur'
          },
          {
            validator: ipCheckExist,
            trigger: 'blur'
          }
        ],
        vmType: [
          {
            required: true,
            message: '请选择宿主类型',
            trigger: 'blur'
          }
        ],
        vmId: [
          {
            required: false,
            validator: CheckVmId,
            trigger: 'blur'
          }
        ],
        haPort: [
          {
            required: true,
            message: '请输入节点端口号',
            trigger: 'blur'
          },
          {
            pattern: global_.PortRegex,
            message: global_.PortRegex_msg,
            trigger: 'blur'
          }
        ],
        nodeSystem: [
          {
            required: true,
            message: '请输入操作系统',
            trigger: 'blur'
          }
        ],
        consoleAddress: [
          {
            required: true,
            message: '请输入与节点IP同网段的控制台地址',
            trigger: 'blur'
          },
          {
            pattern: global_.IpRegex,
            message: global_.IpRegex_msg,
            trigger: 'blur'
          }
        ],
        checkInterval: [
          {
            required: true,
            message: '请选择心跳间隔',
            trigger: 'blur'
          }
        ],
        dataDate: [
          {
            required: true,
            message: '请输入数据存留时间',
            trigger: 'blur'
          },
          {
            pattern: global_.PositiveIntegerRegex,
            message: global_.PositiveIntegerRegex_msg,
            trigger: 'blur'
          }
        ]
      },
      delNodeList: [],
      // 节点类型
      nodeTypeOptions: [],
      // 节点状态
      nodeStatusOptions: [],
      // 代理状态
      agentStatusOptions: [],
      // 代理应用状态
      agentAppStatusOptions: [],
      // 心跳间隔
      checkIntervalOptions: [],
      hostTypeOptions: [],
      sysDialogVisible: false,
      isOne: 1,
      // 新手引导配置
      defineSteps: [],
      userDriverInfo: {},
      selection: []
    }
  },
  created() {
    if (this.$route.params.id) {
      this.queryParams.id = this.$route.params.id
    }
    if (this.$route.params.nodeStatus) {
      this.queryParams.nodeStatus = this.$route.params.nodeStatus
    }
    this.getList()
    this.timer()
    this.getDiceData()

    this.isOne++
  },
  activated() {
    // //接收首页的路由传参
    this.queryParams.id = this.$route.params.id
    this.queryParams.nodeStatus = this.$route.params.nodeStatus
    this.getList()
    if (this.isOne != 1) {
      this.timer()
    }
    this.isOne++
  },
  deactivated() {
    // 离开页面的时候销毁 定时器任务
    clearInterval(this.setIntervalTime)
  },
  destroyed() {
    clearInterval(this.setIntervalTime)
  },
  mounted() {
    this.defineSteps = [
      {
        element: '#guidance',
        popover: {
          title: '帮助引导',
          description:
            '显示本页面的基础介绍，按钮功能和相关的常见问题，和配置攻略。也可以在帮助中心查看所有帮助信息。'
        }
      },
      {
        element: '#queryForm',
        popover: {
          title: '搜索区域',
          description: '输入节点名称,IP或者选择类型状态，来筛选出指定的节点'
        }
      },
      {
        element: '#addBox',
        popover: {
          title: '新增节点',
          description: '点击新增，按要求添加新节点'
        }
      },
      {
        element: '#tableBox',
        popover: {
          title: '节点列表',
          description: '显示已经添加的所有节点列表展示'
        }
      }
    ]

    var vue = this
    setTimeout(() => {
      var belfNode_index = JSON.parse(
        sessionStorage.getItem('novice_guidance_status')
      ).belfNode_index
      if (belfNode_index != 'true') {
        vue.driverStart()
      }
    }, 300)
  },
  methods: {
    // 定时器
    timer() {
      var vue = this
      clearInterval(this.setIntervalTime)
      this.setIntervalTime = window.setInterval(() => {
        vue.getList()
      }, 5000)
    },
    // 开启新手引导
    driverStart() {
      this.$driver.defineSteps(this.defineSteps)
      this.$driver.start()
      this.$store.dispatch('add_guidance_status', 'belfNode_index')
    },
    changeNodeTypeFn(res) {
      if (res == 3) {
        this.form.haPort = 49131
      } else {
        this.form.haPort = 49101
      }
    },
    // 查看
    showHandle(row) {
      this.sysDialogVisible = true
      this.$refs.sysDialog.showHandle(row)
    },
    /** 查询节点信息列表 */
    getList() {
      this.loading = true
      var vue = this

      listBelfNode(this.queryParams).then((response) => {
        this.loading = false
        if (
          JSON.stringify(this.belfNodeList) == JSON.stringify(response.rows)
        ) {
          return false
        }

        this.belfNodeList = response.rows
        this.total = response.total
      })
    },
    // 联通测试
    testHttpCode(resolve) {
      var vue = this

      nodeCheck({
        id: this.form.id
      })
        .then((response) => {
          vue.fullscreenLoading = false
          vue.open = false

          if (response.data.status) {
            vue.$message({
              message: '节点-在线',
              type: 'success'
            })
          } else {
            vue.$message({
              message: '节点-离线',
              type: 'error'
            })
          }
          if (resolve) {
            resolve('获取节点成功')
          }
        })
        .catch((err) => {
          this.fullscreenLoading = false
        })
    },
    // 获取字典数据
    getDiceData() {
      //  获取操作系统
      this.getDicts('sys_version').then((response) => {
        this.nodeSystem = response.data
      })
      // 节点类型
      this.getDicts('node_type').then((response) => {
        this.nodeTypeOptions = response.data
      })

      // 节点状态
      this.getDicts('node_status').then((response) => {
        this.nodeStatusOptions = response.data
      })

      // 心跳间隔
      this.getDicts('node_check_interval').then((response) => {
        this.checkIntervalOptions = response.data
      })

      // 宿主类型
      this.getDicts('host_type').then((response) => {
        this.hostTypeOptions = response.data
      })
      //
      // 			//代理应用状态
      // 			this.getDicts('agent_app_status').then(response => {
      // 				this.agentAppStatusOptions = response.data;
      // 			})
    },
    nodeSystemFormat(row, column) {
      return this.selectDictLabel(this.nodeSystem, row.nodeSystem)
    },
    // 数据状态字典翻译
    nodeTypeFormat(row, column) {
      return this.selectDictLabel(this.nodeTypeOptions, row.nodeType)
    },
    // 数据状态字典翻译
    nodeStatusFormat(row, column) {
      return this.selectDictLabel(this.nodeStatusOptions, row.nodeStatus)
    },
    checkIntervalFormat(row, column) {
      return this.selectDictLabel(this.checkIntervalOptions, row.checkInterval)
    },
    hostTypeFormat(row, column) {
      return this.selectDictLabel(this.hostTypeOptions, row.vmType)
    },
    dataDateFormat(row, column) {
      return row.dataDate + '天'
    },

    // 		// 数据状态字典翻译
    // 		agentStatusFormat(row, column) {
    // 			return this.selectDictLabel(this.agentStatus, row.agentStatus);
    // 		},
    // 		// 数据状态字典翻译
    // 		serviceStatusFormat(row, column) {
    // 			return this.selectDictLabel(this.agentAppStatusOptions, row.serviceStatus);
    // 		},
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        nodeName: null,
        nodeType: null,
        nodeIp: null,
        haPort: 49101,
        nodeStatus: null,
        // agentStatus: 0,
        // serviceStatus: 0,
        nodeDesc: null,
        nodeSystem: null,
        consoleAddress: null,
        checkInterval: '5',
        dataDate: null,
        nodeGateway: null,
        rpcThreadNum: 1,
        rpcTime: 5000
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pgNum = 1
      this.queryParams.id = ''
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.queryParams.id = ''
      this.queryParams.nodeStatus = ''
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.multiple = !selection.length
      this.selection = selection
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      // 控制台默认本机地址

      if (global_.IpRegex.test(window.location.hostname)) {
        var arr = window.location.hostname.split('.')
        // this.form.nodeIp = arr[0] + '.' +arr[1] + '.';
        this.form.consoleAddress = window.location.hostname
      }

      this.open = true
      this.title = '添加节点信息'
    },
    // 节点IP地址发生变化时，网关内容也发生变化
    handlerPageNo(e) {
      this.nodeIPandnodeGateway = e.split('.')
      if (this.nodeIPandnodeGateway.length > 2) {
        this.form.nodeGateway =
          this.nodeIPandnodeGateway[0] +
          '.' +
          this.nodeIPandnodeGateway[1] +
          '.' +
          '1.1'
      }
    },
    // 刷新
    handleUpdateFn(row, resh) {
      this.form = row
      // 获取节点状态
      this.testHttpCode()
      this.getList()
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids[0]

      const loading = this.$loading({
        lock: true,
        text: '加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      loading.close()

      getBelfNode({
        id: id
      })
        .then((response) => {
          this.form = response.data

          this.open = true
          this.title = '修改节点信息'
          // 获取节点状态
          // this.testHttpCode();
        })
        .catch((err) => {
          loading.close()
        })
    },
    nodeSysChange(val) {
      this.nodeSystem.map((item) => {
        if (item.dictValue == val) {
          this.form.sysType = item.extendVal
        }
      })
    },
    /** 提交按钮 */
    submitForm() {
      var vue = this
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // 确认时间过长 添加loading
          const loading = this.$loading({
            lock: true,
            text: '加载中...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          if (!this.form.nodeStatus) {
            this.fullscreenLoading = false
            addBelfNode(this.form)
              .then((response) => {
                loading.close()
                this.msgSuccess('新增成功')
                this.open = false
                this.queryParams.pgNum = 1
                this.getList()
              })
              .catch((err) => {
                loading.close()
              })
            return false
          }
          if (this.form.id != null) {
            new Promise((resolve) => {
              // 获取节点状态
              this.testHttpCode(resolve)
            }).then((res) => {
              updateBelfNode(this.form)
                .then((response) => {
                  loading.close()
                  this.msgSuccess('修改成功')
                  this.open = false
                  this.getList()
                })
                .catch((err) => {
                  loading.close()
                })
            })
          } else {
            addBelfNode(this.form)
              .then((response) => {
                this.msgSuccess('新增成功')
                loading.close()
                this.queryParams.pgNum = 1
                this.open = false
                this.getList()
              })
              .catch((err) => {
                loading.close()
              })
          }
        }
      })
    },

    handleDelete(row) {
      var vue = this

      this.delNodeList = []
      if (row.id) {
        this.delNodeList.push(row)
      } else {
        this.delNodeList = this.delNodeList.concat(this.selection)
      }
      this.ids = this.delNodeList.map((item) => item.id)

      this.delNodeDialogVisible = true
      return false
    },

    /** 删除按钮操作 */
    handleDeleteFn() {
      var vue = this
      const loading = this.$loading({
        lock: true,
        text: '加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      delBelfNode({
        ids: this.ids
      }).then((response) => {
        loading.close()
        vue.getList()
        vue.msgSuccess('删除成功')
        vue.delNodeDialogVisible = false
      })
    }
  }
}
</script>
<style scoped>
.hsPortSpan {
  display: inline-block;
  line-height: 36px;
  margin-left: 20px;
  color: #3fb0e3;
  cursor: pointer;
}

#guidance {
  position: absolute;
  top: 0;
  right: 0;
  height: 58px;
  width: 100px;
}

.tagDiv {
  display: inline-block;
  border: 1px solid #00bcd4;
  border-radius: 4px;
  padding: 0px 10px;
  margin-right: 10px;
  background-color: #f6fcff;
  margin-bottom: 10px;
}

.tagDiv p {
  padding: 3px 10px;
  margin: 0;
}
.ft16 {
  font-size: 16px;
}
.h170 {
  height: 170px;
  overflow: auto;
}
</style>
